<template>
<div class="card-container">
  <div class="card-item" v-for="(item,index) in cardList" :key="index" :style="{backgroundImage:item.bg}">
    <div class="c-font-10 c-font-white">{{item.title}}</div>
    <div class="c-font-20 c-font-white">{{item.number}}个</div>
  </div>
</div>
</template>

<script>
export default {
  name: "Home-card",
  data(){
    return{
      cardList:[
        {
          title:"待办任务",
          bg:"linear-gradient(270deg, #FE6700 0%, #FB9025 74%, #F9B84A 100%)",
          number:23
        },
        {
          title:"公告通知",
          bg:"linear-gradient(90deg, #FF8B55 0%, #FF584C 31%, #FF4749 100%)",
          number:23
        },
        {
          title:"我发起的",
          number:23,
          bg:'linear-gradient(270deg, #4C6DF1 0%, #508AF5 70%, #65A3FF 100%)'
        },
        {
          title:"我的收藏",
          number:23,
          bg:"linear-gradient(270deg, #6638D9 0%, #7E46D0 33%, #9353C9 100%)"
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.card-container{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  border-radius: 6px;
  opacity: 1;
  box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);
  background: #FFFFFF;
  .card-item{
    width: 40%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    opacity: 1;
    margin: 10px;
  }
}
</style>